<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="展品名称" prop="exhibitName">
        <el-input v-model="formData.exhibitName" placeholder="请输入展品名称" />
      </el-form-item>
      <el-form-item label="楼层" prop="floorId">
        <el-select v-model="formData.floorId" placeholder="请选择楼层" @change="loadAreasByFloor">
          <el-option
            v-for="floor in floorList"
            :key="floor.id"
            :label="floor.name"
            :value="floor.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="展区" prop="areaId">
        <el-select v-model="formData.areaId" placeholder="请选择展区">
          <el-option
            v-for="area in areaList"
            :key="area.id"
            :label="area.name"
            :value="area.id"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="是否多媒体" prop="isMedia">-->
<!--        <el-radio-group v-model="formData.isMedia">-->
<!--          <el-radio :value="false">否</el-radio>-->
<!--          <el-radio :value="true">是</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item label="是否多媒体" prop="isMedia">
        <el-radio-group v-model="formData.isMedia">
          <el-radio
            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="视频文件位置" prop="videoPath">
        <el-input v-model="formData.videoPath" placeholder="请输入视频文件位置" />
      </el-form-item>
      <el-form-item label="视频主机ip" prop="videoIp">
        <el-input v-model="formData.videoIp" placeholder="请输入视频主机ip" />
      </el-form-item>
<!--      <el-form-item label="空开编号" prop="airSn">-->
<!--        <el-input v-model="formData.airSn" placeholder="请输入空开编号" />-->
<!--      </el-form-item>-->
      <el-form-item label="x坐标" prop="x">
        <el-input v-model="formData.x" placeholder="请输入x坐标" />
      </el-form-item>
      <el-form-item label="y坐标" prop="y">
        <el-input v-model="formData.y" placeholder="请输入y坐标" />
      </el-form-item>
      <el-form-item label="图标" prop="imageIcon">
        <UploadImg v-model="formData.imageIcon" />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input v-model="formData.orderNum" type="number" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {getBoolDictOptions, DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import { ExhibitApi, ExhibitVO } from '@/api/zkteco/exhibit'
import { FloorApi, FloorVO } from '@/api/zkteco/floor'

/** 展项管理 表单 */
defineOptions({ name: 'ExhibitForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  exhibitName: undefined,
  isMedia: undefined,
  videoPath: undefined,
  videoIp: undefined,
  airSn: undefined,
  floorId: undefined,
  areaId: undefined,
  airStatus: undefined,
  x: undefined,
  y: undefined,
  imageIcon: undefined,
  orderNum: undefined,
})
const formRules = reactive({
  exhibitName: [{ required: true, message: '展品名称不能为空', trigger: 'blur' }],
  isMedia: [{ required: true, message: '多媒体不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

const floorList = ref([]) // 楼层列表
const areaList = ref([]) // 展区列表
const floorAreaOptions = ref([]) // 级联选项

/** 获取楼层数据 */
const loadFloors = async () => {
  const res = await FloorApi.getAllFloorList()
  floorList.value = res
}

/** 根据楼层获取展区数据 */
const loadAreasByFloor = async (floorId: number) => {
  if (!floorId) return
  formData.value.areaId = undefined
  const res = await FloorApi.getAreasByFloor(floorId)
  areaList.value = res
}


/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ExhibitApi.getExhibit(id)
    } finally {
      formLoading.value = false
    }
  }
  await loadFloors()
  if (typeof formData.value.floorId === 'number') {
    const res = await FloorApi.getAreasByFloor(formData.value.floorId)
    areaList.value = res
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ExhibitVO
    if (formType.value === 'create') {
      await ExhibitApi.createExhibit(data)
      message.success(t('common.createSuccess'))
    } else {
      await ExhibitApi.updateExhibit(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    exhibitName: undefined,
    isMedia: undefined,
    videoPath: undefined,
    videoIp: undefined,
    airSn: undefined,
    floorId: undefined,
    areaId: undefined,
    airStatus: undefined,
    x: undefined,
    y: undefined,
    imageIcon: undefined,
    orderNum: undefined,
  }
  formRef.value?.resetFields()
}
</script>
